<template>
  <div>
    <el-empty v-if="momentItems.length == 0" description="无数据" />
    <el-timeline v-else>
      <el-timeline-item
        v-for="item in momentItems"
        :timestamp="getTimestamp(item)"
        placement="top"
        size="large"
        icon="Clock"
      >
        <div class="card-slim timeline-item">
          <el-row :gutter="24">
            <el-col
              :sm="24"
              :md="seatStore.historyView.viewConfig.showImage ? 13 : 24"
              :lg="seatStore.historyView.viewConfig.showImage ? 15 : 24"
            >
              <div class="timeline-item-title">
                <div>
                  <span>扇区数量:</span>
                  <span style="padding-left: 6px; font-weight: bolder">
                    {{ item.count }}
                  </span>
                </div>
                <div v-if="!item.direction">运行方向缺失</div>
                <div v-else>
                  <span>双流</span>
                  <span
                    v-if="item.direction.substr(0, 1) == 'N'"
                    style="font-weight: bolder"
                    >向北</span
                  >
                  <span v-else style="font-weight: bolder">向南</span>
                  <span style="padding: 0 12px">/</span>
                  <span>天府</span>
                  <span
                    v-if="item.direction.substr(1, 1) == 'N'"
                    style="font-weight: bolder"
                    >向北</span
                  >
                  <span v-else style="font-weight: bolder">向南</span>
                </div>
              </div>
              <!-- sector table -->
              <sector-table :seatData="item.content" />
            </el-col>
            <el-col
              v-if="seatStore.historyView.viewConfig.showImage"
              :sm="24"
              :md="11"
              :lg="9"
            >
              <!-- sector image -->
              <sector-image class="timeline-image" :seatData="item.content" />
            </el-col>
          </el-row>
        </div>
      </el-timeline-item>
    </el-timeline>
    <!-- </transition> -->
    <!-- </div> -->
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from "vue";
import dayjs from "dayjs";
import SectorImage from "./SectorImage.vue";
import SectorTable from "./SectorTable.vue";
import useSeatStore from "@/store/seat.js";
const seatStore = useSeatStore();

const momentItems = ref([]);

const getTimestamp = ({ startTime, endTime }) => {
  let startDay = dayjs(startTime);
  let endDay = endTime ? dayjs(endTime) : dayjs();
  let minutes = endDay.diff(startDay, "minute");
  let hours = Math.round(endDay.diff(startDay, "hour", true) * 10) / 10;
  return `${startDay.format("MM/DD HH:mm")} 至 ${endDay.format(
    "MM/DD HH:mm"
  )} (${minutes < 60 ? minutes + "分钟" : hours + "小时"})`;
};

const generateData = () => {
  momentItems.value = []; // 清空

  const list = seatStore.historyView.queryResult.filter(
    (cell) =>
      !cell.endTime ||
      dayjs(cell.endTime).diff(cell.startTime, "minute") >= 10 ||
      !seatStore.historyView.queryConfig.ignoreShort
  );
  let timer = setInterval(() => {
    if (momentItems.value.length < list.length) {
      momentItems.value.push(list[momentItems.value.length]);
    } else {
      clearInterval(timer);
    }
  }, 100);
};

// 监听数据变化，更新图表
watch(
  () => [
    seatStore.historyView.queryResult,
    seatStore.historyView.queryConfig.ignoreShort,
  ],
  () => generateData(),
  { deep: true }
);
</script>

<style scoped>
@import "../card.css";

.timeline-item {
  padding: 24px;
}

.timeline-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-bottom: 14px;
}
.timeline-main-container {
  padding-left: 18px;
  padding-right: 6px;
}
.timeline-image {
  width: 100%;
  max-height: 300px;
  transition: all ease-out 0.5s;
}
.timeline-image:hover {
  transform: scale(1.05);
}
</style>
